/*
 * @Author: xiaosihan 
 * @Date: 2024-06-20 16:13:35 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-17 17:44:00
 */

import partsApi from "@api/partsApi";
import hashHistory from "@hashHistory";
import userStore from "@views/userStore";
import { get } from "lodash";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import loginStore from "../LoginModal/loginStore";
import Head from "./Head/Head";
import loadingGIF from "./loading.gif";
import Model3d from "./Model3d/Model3d";
import model3dRender from "./Model3d/model3dRender";
import styles from "./partCollaborate.module.less";
import partCollaborateStore from "./partCollaborateStore";
import RightPlane from "./RightPlane/RightPlane";
import dragModelStore from "./Model3d/DragModel/dragModelStore";

interface Iprops {
    children?: ReactNode
}

//零件详情
export default function PartCollaborate() {

    const parame = useParams<{ id: string }>();
    const [showPage, setShowPage] = useState(false);
    const [modelId, setModelId] = useState(partCollaborateStore.modelId);
    const [modelName, setModelName] = useState(partCollaborateStore.modelName);

    useEffect(() => autorun(() => {
        setModelId(partCollaborateStore.modelId);
        setModelName(partCollaborateStore.modelName);
    }), []);

    useEffect(() => {
        partCollaborateStore.setBlastProgress(0);
        model3dRender.blastMesh.clear();

        (async () => {
            await userStore.awaitLoginState();

            //如果没有登录就弹窗登录框
            if (!userStore.isLogin) {
                loginStore.setShowLoginModal(true);

                while (loginStore.showLoginModal && !userStore.isLogin) {
                    await new Promise(resolve => setTimeout(resolve, 100));
                }

                //当取消登录后就跳转首页去
                if (!userStore.isLogin) {
                    hashHistory.push("/");
                    return;
                }

            }
            //parame.id 参数有零件id和分享token2种可能
            if (/^\d+$/.test(parame.id || "")) {
                partsApi.get_part_info(parame.id)
                    .then(res => {
                        setShowPage(true);
                        const url = get(res, ["data", "url"]);
                        const name = get(res, ["data", "name"]);
                        const userId = get(res, ["data", "userId"]);
                        const size = get(res, ["data", "size"]);
                        const createTime = get(res, ["data", "createTime"]);
                        partCollaborateStore.setUserId(userId);
                        partCollaborateStore.setModelId(parame.id);
                        partCollaborateStore.setModelName(name);
                        partCollaborateStore.setSize(size);
                        partCollaborateStore.setCreateTime(createTime);
                        model3dRender.loadModel(url);
                        partCollaborateStore.getPartLableData();
                    })
            } else {
                partsApi.verificationToken(parame.id)
                    .then(res => {
                        if (get(res, ["code"]) === 503) {
                            hashHistory.push("/404");
                            return;
                        }
                        setShowPage(true);
                        const url = get(res, ["data", "url"]);
                        const name = get(res, ["data", "name"]);
                        const userId = get(res, ["data", "userId"]);
                        const modelId = get(res, ["data", "id"]);
                        const size = get(res, ["data", "size"]);
                        const createTime = get(res, ["data", "createTime"]);
                        partCollaborateStore.setUserId(userId);
                        partCollaborateStore.setModelId(modelId);
                        partCollaborateStore.setModelName(name);
                        partCollaborateStore.setSize(size);
                        partCollaborateStore.setCreateTime(createTime);
                        model3dRender.loadModel(url);
                        partCollaborateStore.getPartLableData();
                    }).catch(err => {
                        hashHistory.push("/404");
                    });
            }

        })();
        return () => {
            dragModelStore.closeAll();
        }
    }, []);

    return (
        <div className={styles.partCollaborate} >
            <style>
                {`
                    html,body,#root{ 
                        overflow: hidden; 
                    }  
                `}
            </style>
            {/* 协作的头部 */}
            <Head />
            {
                showPage &&
                <div className={styles.container} >
                    {/* 3d 模型展示 */}
                    <Model3d />

                    {/* 右侧面板 */}
                    <RightPlane />
                </div>
            }
            {/* {
                !showPage &&
                <div className={styles.loadding} >
                    <img className={styles.loadingGIF} src={loadingGIF} alt="" />
                </div>
            } */}
        </div>
    );

}